<template>
  <div class="data_type_icon">
    <span class="cuifont" :class="switchDataType(dataTypeObj.type)"></span>
    <span v-if="dataTypeObj.label">{{dataTypeObj.label}}</span>
    <span v-else>{{dataTypeObj.value}}</span>
  </div>
</template>
<script>
export default {
  name: 'DataTypeIcon',
  props: {
    dataTypeObj: {
      type: Object
    }
  },
  methods: {
    switchDataType (type) {
      let className = ''
      switch (type) {
        case 'number':
          className = 'icon_number_type'
          break
        case 'text':
          className = 'icon_text_type'
          break
        case 'date':
          className = 'icon_date_type'
          break
        case 'boolean':
          className = 'icon_bool_type'
          break
        case 'datetime':
          className = 'icon_datetime_type'
          break
        case 'user':
          className = 'icon_user_type'
          break
        case 'hyperlinks':
          className = 'icon_link_type'
          break
        case 'currency':
          className = 'icon_amount_type'
          break
        default: className = 'icon_null_type'
          break
      }
      return className
    }
  }
}
</script>
<style lang="scss">
.data_type_icon{
  span:nth-child(1){
    margin-right: 8px;
   // color: rgba($color: #000000, $alpha: 0.25);
  }
}
.selected{
    .data_type_icon{
      span:nth-child(1){
     //   color: #17B3A3;
      }
    }
  }
</style>
